"use client"

import { SidebarIcon } from "lucide-react"

import { SearchForm } from "~/registry/miami/blocks/sidebar-16/components/search-form"
import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
} from "~/registry/miami/ui/breadcrumb"
import { Button } from "~/registry/miami/ui/button"
import { Separator } from "~/registry/miami/ui/separator"
import { useSidebar } from "~/registry/miami/ui/sidebar"

export function SiteHeader() {
   const { toggleSidebar } = useSidebar()

   return (
      <header className="fle sticky top-0 z-50 w-full items-center border-b bg-background">
         <div className="flex h-[--header-height] w-full items-center gap-2 px-4">
            <Button
               className="h-8 w-8"
               variant="ghost"
               size="icon"
               onClick={toggleSidebar}
            >
               <SidebarIcon />
            </Button>
            <Separator orientation="vertical" className="mr-2 h-4" />
            <Breadcrumb className="hidden sm:block">
               <BreadcrumbList>
                  <BreadcrumbItem>
                     <BreadcrumbLink href="#">
                        Building Your Application
                     </BreadcrumbLink>
                  </BreadcrumbItem>
                  <BreadcrumbSeparator />
                  <BreadcrumbItem>
                     <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                  </BreadcrumbItem>
               </BreadcrumbList>
            </Breadcrumb>
            <SearchForm className="w-full sm:ml-auto sm:w-auto" />
         </div>
      </header>
   )
}
